<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>更新时的一个问题</title>
</head>

<body>
    <div id="root">
        <!-- 遍历数组-人员列表 -->
        <h1>人员列表</h1>
        <button @click="updateMadm">点击修改Madm</button>
        <lu>
            <li v-for="(people,index) in peoples" :key="index">
                {{people.name}}-----{{people.age}}
            </li>
        </lu>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                keyword: '',
                sorttype: 0,
                peoples: [{
                    id: '001',
                    name: '马冬梅',
                    age: '20'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: '21'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: '22'
                }, {
                    id: '004',
                    name: '温兆伦',
                    age: '23'
                }],
            },
            methods: {
                updateMadm() {
                    //生效
                    // this.peoples[0].name = '马老师'
                    // this.peoples[0].age = '50'

                    //不生效
                    // this.peoples[0] = {
                    //     id: '001',
                    //     name: '马老师',
                    //     age: '50'
                    // }

                    //生效
                    // this.peoples.splice(0, 1, {
                    //     id: '001',
                    //     name: '马老师',
                    //     age: '50'
                    // })
                    vm.$set(this.peoples, 0, {
                        id: '001',
                        name: '马老师',
                        age: '50'
                    })

                }
            },

        })
    </script>
</body>

</html>